<template>
  <div>
    <note-templates :data="arrayData" :list="directory">
      <template #note>
        <div id="note-item1">
          <title-card title="1.添加数组"></title-card>
          <b><p>push(val1, val2, ...)</p></b>
          <pre-code :code="push" language="JavaScript"></pre-code>

          <b><p>unshift(val1, val2, ...) </p></b>
          <pre-code :code="unshift" language="JavaScript"></pre-code>

          <b><p>splice(index, 0, val1, val2, ...)</p></b>
          <pre-code :code="space" language="JavaScript" />

          <b><p>array[array.length] = value;</p></b>
          <pre-code :code="arrayLenght" language="JavaScript" />
        </div>
        <div id="note-item2">
          <title-card title="2.删除元素"></title-card>
          <b><p>pop()</p></b>
          <pre-code :code="pop" language="JavaScript" />
          
          <b><p>shift()</p></b>
          <pre-code :code="shift" language="JavaScript" />
          
          <b><p>splice(index, homany, val1, val2, ...)</p></b>
          <pre-code :code="splice" language="JavaScript" />
          
          <b><p>array.length = len</p></b>
          <pre-code :code="arratlen" language="JavaScript" />
        </div>
        <div id="note-item3">
          <title-card title="3.排序"></title-card>
          <b><p>reverse()</p></b>
          <pre-code :code="reverse" language="JavaScript" />
          
          <b><p>sort()</p></b>
          <pre-code :code="sort" language="JavaScript" />
        </div>
        <div id="note-item4">
          <title-card title="4.连接"></title-card>
          <b><p>concat()</p></b>
          <pre-code :code="concat" language="JavaScript" />
          
          <b><p>join()</p></b>
          <pre-code :code="join" language="JavaScript" />
          
        </div>
        <div id="note-item5">
          <title-card title="5.截取"></title-card>
          <b><p>slice()</p></b>
          <p>`slice()` 方法返回一个新的数组对象，这一对象是一个由 `begin` 和 `end` 决定的原数组的 <b>浅拷贝</b>（包括 `begin`，不包括`end`）。原始数组不会被改变。</p>
          <pre-code :code="slice" language="JavaScript" />
          
        </div>
        <div id="note-item6">
          <title-card title="6.转换"></title-card>
          <b><p>toString()</p></b>
          <pre-code :code="toString" language="JavaScript" />
        </div>
        <div id="note-item7">
          <title-card title="7.遍历迭代"></title-card>
          <b><p>forEach(callback)</p></b>
          <pre-code :code="forEach" language="JavaScript" />
          
          <b><p>map(callback)</p></b>
          <pre-code :code="map" language="JavaScript" />
          
          <b><p>some(callback)</p></b>
          <pre-code :code="map" language="JavaScript" />
          
          <b><p>every(callback)</p></b>
          <pre-code :code="every" language="JavaScript" />
          
          <b><p>filter(callback)</p></b>
          <pre-code :code="filter" language="JavaScript" />
          
          <b><p>findIndex(callback)</p></b>
          <pre-code :code="findIndex" language="JavaScript" />
        </div>
        <div id="note-item8">
          <title-card title="8.查找"></title-card>
          <b><p>indexOf(searchValue, fromIndex)</p></b>
          <pre-code :code="indexOf" language="JavaScript" />
          
          <b><p>lastIndexOf()</p></b>
          <pre-code :code="lastIndexOf" language="JavaScript" />
          
          <b><p>includes()</p></b>
          <p>用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 `true`，否则返回 `false`。</p>
          <pre-code :code="includes" language="JavaScript" />
        </div>
        <div id="note-item9">
          <title-card title="9.归并"></title-card>
          <b><p>reduce()</p></b>
          <p>接收4个参数:</p>
          <p>&nbsp;&nbsp;1.Accumulator (acc) (累计器)</p>
          <p>&nbsp;&nbsp;2.Current Value (cur) (当前值)</p>
          <p>&nbsp;&nbsp;3.Current Index (idx) (当前索引)</p>
          <p>&nbsp;&nbsp;4.Source Array (src) (源数组)</p>
          <pre-code :code="reduce" language="JavaScript" />
          <b><p>reduceRight()</p></b>
          <pre-code :code="reduceRight" language="JavaScript" />
        </div>
        <div id="note-item10">
          <title-card title="10.打平填充"></title-card>
          <b><p>flat()</p></b>
          <p>flat()方法用于创建并返回一个新数组，这个新数组包含与它调用flat()的数组相同的元素，只不过其中任何本身也是数组的元素会被打平填充到返回的数组中：</p>
          <pre-code :code="flat1" language="JavaScript" />
          
          <p>在不传参数时，flat()默认只会打平一级嵌套，如果想要打平更多的层级，就需要传给flat()一个数值参数，这个参数表示要打平的层级数：</p>
          <pre-code :code="flat2" language="JavaScript" />
          
          <p>如果数组中存在空项，会直接跳过：</p>
          <pre-code :code="flat3" language="JavaScript" />
          
          <p>如果传入的参数小于等于0，就会返回原数组：</p>
          <pre-code :code="flat4" language="JavaScript" />
        </div>
        <div id="note-item11">
          <title-card title="11.ES6新增API"></title-card>
          <b><p>Array.from()</p></b>
          <pre-code :code="arrayFrom" language="JavaScript" />
          
          <b><p>Array.prototype.fill()</p></b>
          <pre-code :code="prototypeFill" language="JavaScript" />
        </div>
      </template>
    </note-templates>
  </div>
</template>

<script setup name="Array">
import NoteTemplates from '@/components/NoteTemplates/index.vue'
import TitleCard from "@/components/TitleCard/index.vue"
import { postArticleDetail } from '@/api/home.js';
import { onMounted, reactive, toRefs } from 'vue';

const push = ref(`//将一个或多个元素添加到数组的末尾，并返回该数组的新长度

const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]`)
const unshift = ref(`//将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));
// expected output: 5
console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]`)
const space = ref(`//通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]`)
const arrayLenght = ref(`array[array.length] = value;  //向末尾添加一个元素`)
const pop = ref(`//从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]`)
const shift = ref(`//从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1`)
const splice = ref(`//通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]`)
const arratlen = ref(`array.length = len  //从末尾删除多个元素`)
const reverse = ref(`//将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]`)
const sort = ref(`//用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

//由于它取决于具体实现，因此无法保证排序的时间和空间复杂性
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

array1.sort((a,b)=>a-b)
console.log(array1);
// expected output: Array [1, 4, 21, 30, 100000]

const objectArr = [     
    { first_name: 'Lazslo', last_name: 'Jamf'     },    
    { first_name: 'Pig',    last_name: 'Bodine'   },    
    { first_name: 'Pirate', last_name: 'Prentice' }];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// 输出
(3) [{…}, {…}, {…}]
0: {first_name: "Pig", last_name: "Bodine"}
1: {first_name: "Lazslo", last_name: "Jamf"}
2: {first_name: "Pirate", last_name: "Prentice"}
length: 3`)
const concat = ref(`//用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]`)
const join = ref(`//将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"`)
const slice = ref(`slice(start, end)  //从start起始索引处，截取子数组到end结束索引处，包含起始索引的元素，不包含结束索引处元素。end可省略，表示截取到最后。start，end都可以取负值，表示从后往前计数。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]`)
const toString = ref(`//一个字符串，表示指定的数组及其元素
//使用逗号连接数组元素为字符串返回
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// expected output: "1,2,a,1a"`)
const forEach = ref(`//forEach()方法对数组的每个元素执行一次提供的函数callback
//callback语法：function(currentValue, index, array){}  
//currentValue 数组中遍历到的当前值。index 当前遍历到元素在数组中的下标。 array 正在调用forEach()方法的数组

let arr=[2, 5, , 9]
arr.forEach((currentValue, index, array)=>{
    console.log('a[' + index + '] = ' + currentValue);
});
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9`)
const map = ref(`//创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]`)
const some = ref(`//测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true`)
const every = ref(`//测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true`)
const filter = ref(`//创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

//从数组中过滤出虚假值
const array = [3, 0, 6, 7, '', false];
array.filter(Boolean);
// 输出
(3) [3, 6, 7]

// 删除重复值
const array  = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// or
const nonUnique = [...new Set(array)];
// 输出: [5, 4, 7, 8, 9, 2]`)
const findIndex = ref(`//功能: 返回数组中满足提供的测试函数的第一个元素的索引。若没有则返回-1。
let arr = [10, 2, 9, 17, 22];
let index = arr.findIndex((item) => item > 13)
console.log(index);  // 3`)
const indexOf =ref(`//返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
//indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
//查找数组中searchElement元素第一次出现的索引，默认从下标编号为0的位置开始查找。
//参数：searchValue 要查的值；fromIndex 查找开始位置。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1`)
const lastIndexOf = ref(`//返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

console.log(animals.lastIndexOf('Tiger'));
// expected output: 1`)
const includes = ref(`const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false`)
const reduce = ref(`//对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

const array = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array.reduce(reducer, 5));
// expected output: 15

// 最大值
array.reduce((a,b) => a>b?a:b);

// 最小值
array.reduce((a,b) => a<b?a:b);`)
const reduceRight = ref(`
//接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]`)
const flat1 = ref(`[1, [2, 3]].flat()        // [1, 2, 3]
[1, [2, [3, 4]]].flat()   // [1, 2, [3, 4]]`)
const flat2 = ref(`[1, [2, [3, 4]]].flat(2)  // [1, 2, 3, 4]`)
const flat3 = ref(`[1, [2, , 3]].flat());    //  [1, 2, 3]`)
const flat4 = ref(`[1, [2, [3, [4, 5]]]].flat(0);    //  [1, [2, [3, [4, 5]]]]
[1, [2, [3, [4, 5]]]].flat(-10);  //  [1, [2, [3, [4, 5]]]]`)
const arrayFrom = ref(`//从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]`)
const prototypeFill = ref(`//用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

const array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6)); 
// expected output: [6, 6, 6, 6]`)
const directory = ref([
  { 
    name:'1.添加数组',
    id: 'note-item1'
  },
  { 
    name:'2.删除元素',
    id: 'note-item2'
  },
  { 
    name:'3.排序',
    id: 'note-item3'
  },
  { 
    name:'4.连接',
    id: 'note-item4'
  },
  { 
    name:'5.截取',
    id: 'note-item5'
  },
  { 
    name:'6.转换',
    id: 'note-item6'
  },
  { 
    name:'7.遍历迭代',
    id: 'note-item7'
  },
  { 
    name:'8.查找',
    id: 'note-item8'
  },
  { 
    name:'9.归并',
    id: 'note-item9'
  },
  { 
    name:'10.打平填充',
    id: 'note-item10'
  },
  { 
    name:'11.ES6新增API',
    id: 'note-item11'
  },
])
const data = reactive({
  arrayData: {},
});
const { arrayData } = toRefs(data);
const getTitle = () => {
  postArticleDetail({
    route: 'Array',
  }).then((res) => {
    arrayData.value = res.data;
  });
};
onMounted(()=>{
  getTitle();
})
</script>
